<template>
  <div class="CollapseList">
    <Collapse
      v-for="sheet in sheetList"
      :key="sheet.showName"
      :sheet="sheet"
      v-on:change-sheet-name="changeSheetName"
      v-on:remove-sheet="removeSheet"
    ></Collapse>
  </div>
</template>

<script>
import Collapse from "@/components/common/Collapse.vue";
export default {
  components: {
    Collapse,
  },
  props: ["sheetList"],
  data() {
    return {};
  },
  methods: {
    changeSheetName(sheetName, newSheetName) {
      //判断新的表名是否为现有表名， 如果是那么提示用户表名重复
      for (let sheet of this.sheetList) {
        if (sheet.showName == newSheetName) {
          this.$message.error("表名已经存在，请重新定义");
          return false;
        }
      }

      for (let i = 0; i < this.sheetList.length; i++) {
        if (this.sheetList[i].showName == sheetName) {
          let data = {
            newSheetName,
            oldSheetName: sheetName,
          };
          this.$axios.post("changeSheetName", data).then((res) => {
            if (res.code == 200) {
              this.sheetList[i].showName = newSheetName;
              this.$message({
                type: "success",
                message: res.msg,
              });

              return true
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      }

      return false
    },
    removeSheet(sheetName){
        for(let i = 0; i < this.sheetList.length; i++){
            if(this.sheetList[i].showName == sheetName){
                let data = {
                    sheetName
                }
                this.$axios.post('/delSheet', data)
                .then(res => {
                    if(res.code == 200){ //如果服务端删除成功，就提示用户删除成功，并且删除sheetList中的指定数据
                        this.$message({
                            type: 'success',
                            message: res.msg,
                        })

                        this.sheetList.splice(i, 1)

                        return true
                    }
                    else{
                        this.$message.error(res.msg)
                    }
                })
            }
        }

    },
  },
};
</script>

<style scoped>
  /* .CollapseList{
    overflow-y: scroll;
  } */
</style>